<!--
 * @Description: 备货单
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-06-25 11:13:43
 * @FilePath: /yuxiuproweb/src/views/qb/stock/index.vue
-->
<template>
  <div>
    <div class="stock-search">
      <div class="help-search">
        <div class="help-search-icon" @click="handleSearch(orderId)">
          <i class="el-icon-search"></i>
        </div>
        <div class="help-search-input">
          <input
            ref="input"
            v-model="orderId"
            type="text"
            placeholder="请扫描/输入订单号或者任务单号"
            @keyup.enter="handleSearch(orderId)"
          />
        </div>
        <div class="help-search-btn" @click="handleSearch(orderId)">查询</div>
      </div>
    </div>
    <div
      v-if="
        customCurtainList.length ||
        proOrderCustomWindowCurtains.length ||
        proOrderCustomOthers.length ||
        proOrderRaws.length
      "
    >
      <div style="margin: 0 30px" v-if="customCurtainList.length">
        <h2>定制窗布</h2>
        <el-table ref="multipleTable" border :data="customCurtainList">
          <el-table-column label="" prop="name" width="60" align="center">
            <template slot-scope="{ row }">
              <div
                class="check"
                @click="
                  !row.checked &&
                    handleSearch(`${row.proOrderCustomCurtainId}_CL`)
                "
              >
                <img
                  v-if="row.checked"
                  src="@/assets/images/check.png"
                  alt=""
                />
                <img v-else src="@/assets/images/check1.png" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            prop="name"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="房间" prop="name" width="60" align="center">
            <template slot-scope="{ row }">{{
              row.room ? row.room.name : ""
            }}</template>
          </el-table-column>
          <el-table-column label="明细" prop="curtainInfo" min-width="150">
            <template slot-scope="{ row }">
              {{ row.curtainInfo }} 面料：{{ row.detail }} 房间：{{
                row.room ? row.room.name : ""
              }}
              数量：{{ row.number }}
            </template>
          </el-table-column>
          <el-table-column
            label="余料"
            prop="oddments"
            width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              {{
                row.oddments === "0"
                  ? "无"
                  : row.oddments === "1"
                  ? "寄回"
                  : row.oddments === "2"
                  ? "加工"
                  : "无"
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin: 0 30px" v-if="proOrderCustomWindowCurtains.length">
        <h2>定制窗幔</h2>
        <el-table
          ref="multipleTable"
          border
          :data="proOrderCustomWindowCurtains"
        >
          <el-table-column label="" prop="name" width="60" align="center">
            <template slot-scope="{ row }">
              <div
                class="check"
                @click="
                  !row.checked &&
                    handleSearch(`${row.orderCustomWindowCurtainId}_CM`)
                "
              >
                <img
                  v-if="row.checked"
                  src="@/assets/images/check.png"
                  alt=""
                />
                <img v-else src="@/assets/images/check1.png" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            prop="name"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="房间" prop="name" width="60" align="center">
            <template slot-scope="{ row }">{{
              row.room ? row.room.name : ""
            }}</template>
          </el-table-column>
          <el-table-column label="明细" prop="name" min-width="150">
            <template slot-scope="{ row }">
              {{ row.name }} | {{ row.detail }} 数量：{{ row.number }} 宽：{{
                row.wright
              }}
              高：{{ row.height }} {{ row.fixedMethodName }} 备注：{{
                row.processingRemarks
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="余料"
            prop="oddments"
            width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              {{
                row.oddments === "0"
                  ? "无"
                  : row.oddments === "1"
                  ? "寄回"
                  : row.oddments === "2"
                  ? "加工"
                  : "无"
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin: 0 30px" v-if="proOrderCustomOthers.length">
        <h2>定制其他</h2>
        <el-table ref="multipleTable" border :data="proOrderCustomOthers">
          <el-table-column label="" prop="name" width="60" align="center">
            <template slot-scope="{ row }">
              <div
                class="check"
                @click="
                  !row.checked && handleSearch(`${row.orderCustomOtherId}_QT`)
                "
              >
                <img
                  v-if="row.checked"
                  src="@/assets/images/check.png"
                  alt=""
                />
                <img v-else src="@/assets/images/check1.png" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            prop="name"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="房间" prop="name" width="60" align="center">
            <template slot-scope="{ row }">{{
              row.room ? row.room.name : ""
            }}</template>
          </el-table-column>
          <el-table-column label="明细" prop="name" min-width="150">
            <template slot-scope="{ row }">
              {{ row.name }} | {{ row.detail }} 数量：{{ row.number }}
            </template>
          </el-table-column>
          <el-table-column
            label="余料"
            prop="oddments"
            width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              {{
                row.oddments === "0"
                  ? "无"
                  : row.oddments === "1"
                  ? "寄回"
                  : row.oddments === "2"
                  ? "加工"
                  : "无"
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin: 0 30px" v-if="proOrderRaws.length">
        <h2>成品原料</h2>
        <el-table ref="multipleTable" border :data="proOrderRaws" class="mb40">
          <el-table-column label="" prop="name" width="60" align="center">
            <template slot-scope="{ row }">
              <div
                class="check"
                @click="!row.checked && handleSearch(`${row.orderRawId}_CPYL`)"
              >
                <img
                  v-if="row.checked"
                  src="@/assets/images/check.png"
                  alt=""
                />
                <img v-else src="@/assets/images/check1.png" alt="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            prop="name"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="房间" prop="name" width="60" align="center">
            <template slot-scope="{ row }">{{
              row.room ? row.room.name : ""
            }}</template>
          </el-table-column>
          <el-table-column label="明细" prop="name" min-width="150">
            <template slot-scope="{ row }">
              {{ row.name }} 数量：{{ row.number }}
            </template>
          </el-table-column>
          <el-table-column
            label="余料"
            prop="oddments"
            width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              {{
                row.oddments === "0"
                  ? "无"
                  : row.oddments === "1"
                  ? "寄回"
                  : row.oddments === "2"
                  ? "加工"
                  : "无"
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin: 30px; display: flex; justify-content: left">
        <el-input
          v-model="shelfPosition"
          placeholder="请输入货架位置"
          style="
            width: 200px;
            margin-right: 10px;
            color: red;
            font-size: 22px;
            font-weight: bold;
            border: 2px red solid;
          "
        ></el-input>
        <el-button type="primary" @click="handleSubmit">保 存</el-button>
        <el-button type="success" @click="handlePrint">打 印</el-button>
        <el-button @click="handleEmpty">清 空</el-button>
      </div>
    </div>

    <!-- 打印 -->
    <print-view
      v-if="print.show"
      :show.sync="print.show"
      v-bind="print"
    ></print-view>
  </div>
</template>

<script>
import { getPickingList, addPicking, getPicking } from "@/api/asc/invoice";
import { updateOrder } from "@/api/asc/order";
import PrintView from "./mods/print.vue";
import { listFacilities } from "@/api/process/facilities";
export default {
  components: {
    PrintView,
  },
  data() {
    return {
      orderId: "",
      orderInfo: null,
      customCurtainList: [],
      proOrderCustomWindowCurtains: [],
      proOrderCustomOthers: [],
      proOrderRaws: [],
      methodList: [],
      print: {
        show: false,
        data: null,
      },
      shelfPosition: null,
    };
  },
  created() {
    this.getMethodList();
    this.handleFocus();
  },

  methods: {
    getMethodList() {
      listFacilities({
        pageNum: 1,
        pageSize: 5000,
        type: "0",
      }).then(({ rows }) => {
        this.methodList = rows;
        console.log(rows);
      });
    },
    handleFocus() {
      this.$nextTick(() => {
        this.$refs.input?.focus();
      });
    },
    handleSearch(id) {
      if (!id) {
        this.$message.error("请扫码/输入订单编号");
        return;
      }
      if (this.orderInfo) {
        this.handleMate(id);
        this.orderId = "";
        this.handleFocus();
        return;
      }
      getPickingList({
        orderId: id,
      }).then(async (res) => {
        this.orderId = "";
        this.orderInfo = res.data;
        this.shelfPosition = res.data.shelfPosition;
        const list = await this.getPicking(id);
        this.customCurtainList = (res.data?.customCurtainList || []).map(
          (e) => {
            const status = list.find(
              (v) =>
                v.type === "CL" &&
                `${v.productId}` === `${e.proOrderCustomCurtainId}`
            );
            return {
              ...e,
              checked: !!status,
            };
          }
        );
        this.proOrderCustomWindowCurtains = (
          res.data?.proOrderCustomWindowCurtains || []
        ).map((e) => {
          const status = list.find(
            (v) =>
              v.type === "CM" &&
              `${v.productId}` === `${e.orderCustomWindowCurtainId}`
          );
          const fixedMethodItem = this.methodList.find(
            (v) => `${v.mdWindowCurtainFacilitiesId}` === e.fixedMethod
          );
          return {
            ...e,
            fixedMethodName: fixedMethodItem?.name,
            checked: !!status,
          };
        });
        this.proOrderCustomOthers = (res.data?.proOrderCustomOthers || []).map(
          (e) => {
            const status = list.find(
              (v) =>
                v.type === "QT" &&
                `${v.productId}` === `${e.orderCustomOtherId}`
            );
            return {
              ...e,
              checked: !!status,
            };
          }
        );
        this.proOrderRaws = (res.data?.proOrderRaws || []).map((e) => {
          const status = list.find(
            (v) => v.type === "CPYL" && `${v.productId}` === `${e.orderRawId}`
          );
          return {
            ...e,
            checked: !!status,
          };
        });
      });
    },

    // 保存勾选状态
    addPicking(id, type) {
      addPicking({
        orderId: this.orderInfo.proOrderId,
        productId: id,
        type,
      }).then((res) => {
        console.log(res);
      });
    },

    // 查询勾选状态
    async getPicking(id) {
      const { rows } = await getPicking({
        orderId: id,
      });
      return rows;
    },

    // 判断是否全选
    handleSelectAll() {
      const list1 = this.customCurtainList.filter((e) => e.checked);
      const list2 = this.proOrderCustomWindowCurtains.filter((e) => e.checked);
      const list3 = this.proOrderCustomOthers.filter((e) => e.checked);
      const list4 = this.proOrderRaws.filter((e) => e.checked);
      if (
        list1.length === this.customCurtainList.length &&
        list2.length === this.proOrderCustomWindowCurtains.length &&
        list3.length === this.proOrderCustomOthers.length &&
        list4.length === this.proOrderRaws.length
      ) {
        this.updateOrder({
          ...this.orderInfo,
          stockUp: "1",
        });
      }
    },

    // 匹配数据
    handleMate(idCode) {
      const [id, type] = idCode?.replace(/——/gi, "_")?.split("_");
      this.customCurtainList = this.customCurtainList.map((e) => {
        return {
          ...e,
          checked:
            `${e.proOrderCustomCurtainId}` === id && type === "CL"
              ? true
              : e.checked,
        };
      });
      this.proOrderCustomWindowCurtains = this.proOrderCustomWindowCurtains.map(
        (e) => {
          return {
            ...e,
            checked:
              `${e.orderCustomWindowCurtainId}` === id && type === "CM"
                ? true
                : e.checked,
          };
        }
      );
      this.proOrderCustomOthers = this.proOrderCustomOthers.map((e) => {
        return {
          ...e,
          checked:
            `${e.orderCustomOtherId}` === id && type === "QT"
              ? true
              : e.checked,
        };
      });
      this.proOrderRaws = this.proOrderRaws.map((e) => {
        return {
          ...e,
          checked:
            `${e.orderRawId}` === id && type === "CPYL" ? true : e.checked,
        };
      });

      // addPicking
      const item1 = this.customCurtainList.find(
        (e) => `${e.proOrderCustomCurtainId}` === id
      );
      const item2 = this.proOrderCustomWindowCurtains.find(
        (e) => `${e.orderCustomWindowCurtainId}` === id
      );
      const item3 = this.proOrderCustomOthers.find(
        (e) => `${e.orderCustomOtherId}` === id
      );
      const item4 = this.proOrderRaws.find((e) => `${e.orderRawId}` === id);
      if (item1 || item2 || item3 || item4) {
        this.addPicking(id, type || "");
      }
      this.handleSelectAll();
    },
    updateOrder(query) {
      updateOrder(query).then(({ data }) => {
        this.$modal.msgSuccess("保存成功");
      });
    },
    // 保存
    handleSubmit() {
      this.updateOrder({
        ...this.orderInfo,
        shelfPosition: this.shelfPosition,
      });
    },
    // 打印
    handlePrint() {
      const data = {
        ...this.orderInfo,
        customCurtainList: this.customCurtainList,
        proOrderCustomWindowCurtains: this.proOrderCustomWindowCurtains,
        proOrderCustomOthers: this.proOrderCustomOthers,
        proOrderRaws: this.proOrderRaws,
      };
      this.print = {
        show: true,
        list: [data],
      };
    },
    // 清空
    handleEmpty() {
      this.orderId = "";
      this.orderInfo = null;
      this.customCurtainList = [];
      this.proOrderCustomWindowCurtains = [];
      this.proOrderCustomOthers = [];
      this.proOrderRaws = [];
      this.handleFocus();
    },
  },
};
</script>

<style scoped lang="scss">
.stock-search {
  width: 600px;
  margin: 50px auto;
}
.help-search {
  background-color: #fff;
  width: 100%;
  height: 60px;
  border-radius: 10px;
  border: 2px solid #409eff;
  display: flex;
  align-items: center;
  &-icon {
    width: 52px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #409eff;
  }
  &-input {
    flex: 1;
    height: 100%;
    input {
      width: 100%;
      height: 100%;
      font-size: 20px;
      border: 0;
      background: none;
      outline: none;
      &:focus {
        border: none;
      }
    }
  }
  &-btn {
    width: 72px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    color: #409eff;
    font-weight: bold;
  }
}
.check {
  width: 40px;
  height: 40px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
